<template>
  <div class="not-found-container">
    <div class="not-found-content">
      <div class="error-code">404</div>
      <div class="error-message">页面未找到</div>
      <div class="error-description">
        抱歉，您访问的页面不存在或已被删除
      </div>
      <div class="error-actions">
        <el-button type="primary" @click="goHome">
          <el-icon><House /></el-icon>
          返回首页
        </el-button>
        <el-button @click="goBack">
          <el-icon><Back /></el-icon>
          返回上页
        </el-button>
      </div>
    </div>
    <div class="error-illustration">
      <svg viewBox="0 0 404 300" class="illustration-svg">
        <!-- 404插图 -->
        <defs>
          <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#409EFF;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#67C23A;stop-opacity:1" />
          </linearGradient>
        </defs>
        
        <!-- 背景圆圈 -->
        <circle cx="200" cy="150" r="120" fill="#f5f7fa" opacity="0.5"/>
        
        <!-- 数字4 -->
        <path d="M80 80 L80 180 L120 180 L120 120 L140 120 L140 180 L160 180 L160 80 L140 80 L140 100 L120 100 L120 80 Z" fill="url(#gradient1)"/>
        
        <!-- 数字0 -->
        <ellipse cx="200" cy="130" rx="40" ry="60" fill="none" stroke="url(#gradient1)" stroke-width="20"/>
        
        <!-- 数字4 -->
        <path d="M260 80 L260 180 L300 180 L300 120 L320 120 L320 180 L340 180 L340 80 L320 80 L320 100 L300 100 L300 80 Z" fill="url(#gradient1)"/>
        
        <!-- 装饰元素 -->
        <circle cx="100" cy="50" r="8" fill="#E6A23C" opacity="0.6"/>
        <circle cx="320" cy="60" r="6" fill="#F56C6C" opacity="0.6"/>
        <circle cx="80" cy="220" r="10" fill="#67C23A" opacity="0.6"/>
        <circle cx="340" cy="210" r="7" fill="#909399" opacity="0.6"/>
        
        <!-- 星星装饰 -->
        <polygon points="150,40 155,50 165,50 157,57 160,67 150,60 140,67 143,57 135,50 145,50" fill="#409EFF" opacity="0.7"/>
        <polygon points="280,230 285,240 295,240 287,247 290,257 280,250 270,257 273,247 265,240 275,240" fill="#E6A23C" opacity="0.7"/>
      </svg>
    </div>
  </div>
</template>

<script>
import { House, Back } from '@element-plus/icons-vue'

export default {
  name: 'NotFound',
  components: {
    House,
    Back
  },
  methods: {
    goHome() {
      this.$router.push('/')
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.not-found-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.not-found-content {
  text-align: center;
  max-width: 500px;
  margin-right: 50px;
}

.error-code {
  font-size: 120px;
  font-weight: bold;
  color: #409EFF;
  line-height: 1;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-message {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.error-description {
  font-size: 16px;
  color: #606266;
  margin-bottom: 40px;
  line-height: 1.6;
}

.error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.error-actions .el-button {
  padding: 12px 24px;
  font-size: 16px;
}

.error-illustration {
  flex-shrink: 0;
}

.illustration-svg {
  width: 400px;
  height: 300px;
  max-width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .not-found-container {
    flex-direction: column;
    text-align: center;
  }
  
  .not-found-content {
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .error-code {
    font-size: 80px;
  }
  
  .error-message {
    font-size: 24px;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .error-actions .el-button {
    width: 200px;
  }
  
  .illustration-svg {
    width: 300px;
    height: 225px;
  }
}

@media (max-width: 480px) {
  .error-code {
    font-size: 60px;
  }
  
  .error-message {
    font-size: 20px;
  }
  
  .error-description {
    font-size: 14px;
  }
  
  .illustration-svg {
    width: 250px;
    height: 187px;
  }
}

/* 动画效果 */
.not-found-content {
  animation: fadeInUp 0.8s ease-out;
}

.error-illustration {
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 悬停效果 */
.error-actions .el-button:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.illustration-svg:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
</style>